import React, { useEffect, useMemo, useState } from "react";
import FloatingButton from "./components/FloatingButton";
import SidePanel from "./components/SidePanel";
import ToastContainer from "./components/ToastContainer";
import { useToasts } from "./hooks/useToasts";

export interface UIController {
  togglePanel: () => void;
  showToast: (message: string, type?: "success" | "error" | "info" | "warning", duration?: number) => void;
}

interface AppProps {
  onReady?: (controller: UIController) => void;
}
/** 扩展主界面 */
export default function App(props: AppProps) {
  const [panelVisible, setPanelVisible] = useState(false);
  const { toasts, showToast, removeToast } = useToasts();
  /** 控制器 */
  const controller = useMemo<UIController>(
    () => ({
      togglePanel: () => setPanelVisible((v) => !v),
      showToast,
    }),
    []
  );

  useEffect(() => {
    props.onReady?.(controller);
  }, [controller]);

  return (
    <>
      <FloatingButton onClick={() => setPanelVisible((v) => !v)} />
      <SidePanel visible={panelVisible} onClose={() => setPanelVisible(false)} />
      <ToastContainer toasts={toasts} onClose={removeToast} />
    </>
  );
}